<!--
 * @Description: 菜单管理
 * @Author: 阳婷
 * @Date: 2021-03-18 10:34:01
 * @LastEditTime: 2022-03-29 14:21:46
 * @LastEditors: 阳婷
 :reserve-selection="true"表格加这个参数需要加row-key但是表格后会有空白
-->
<template>
    <div class='box-index'>
        <div class="role-content">
            <table-header :hideBtn="hideBtn">
                <el-button type="text" icon="fa fa-plus" @click='addData'> 添加</el-button>
            </table-header>
        </div>
        <el-table border style="width: 100%" :data="tableData" @row-click='rowclick' row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            ref="tables" highlight-current-row>
            <el-table-column prop="display_name" label="菜单名称"></el-table-column>
            <el-table-column prop="route" label="地址"></el-table-column>
            <el-table-column prop="icon" label="图标"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <asides v-model:show="show" v-model:header="header" v-model:Icon='icon' v-model:width="width">
                <side-info v-model:row-data="rowData" v-model:data="tableData" v-model:tree="tree"></side-info>
            </asides>
        </div>
    </div>
</template>
<script>
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Asides from "@/components/Asides"
    import sideInfo from './sideInfo.vue'
    export default {
        data() {
            return {
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: false
                },
                sort: '',
                tableData: [],
                rowData: {},
                header: "",
                show: false,
                icon: "el-icon-menu",
                width: "560px",
                tree:[]
            }
        },
        components: {
            TableHeader,
            Asides,
            sideInfo
        },
        mounted() {
            this.getData()
            setTimeout(() => {
                this.getTree()
            }, 300);
        },
        methods: {
            getData() {
                this.show ? this.show = false : ""
                this.$ajax('get', '/api/admin/menus', {
                }, (data) => {
                    this.tableData = data.data
                })
            },
            getTree() {
                this.$ajax('get', '/api/admin/menu/tree', {
                }, (data) => {
                    this.tree = data.data
                })
            },
            rowclick(val) {
                this.show = true
                this.header = val.display_name
                this.rowData = val
            },
            addData() {
                this.show = true
                this.rowData = {}
                this.header = "添加"
            },
        }
    }
</script>